<template>
  <div ref="getheight" class="wapper">
    <el-container>
      <el-main>
        <div class="table-wrap" v-show="listShow">
          <div class="handle-box3">
            <el-form :inline="true" ref="form" :model="searchForm" class="demo-form-inline">
              <div class="uers-left">
                <el-form-item label="搜索：">
                  <el-input v-model="searchForm.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-input v-model="searchForm.phone" placeholder="手机"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
              </div>
              <div class="uers-right">
                <span class="btn-r">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addSubmit">新增</el-button>
                </span>
              </div>
            </el-form>
          </div>
          <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <!-- <el-table-column type="index" label="序号" align="center" width="60"></el-table-column> -->
            <el-table-column prop="name" label="姓名" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.phone}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.email}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="avatar" label="当前项目" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.project}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="roles" label="用户角色" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.roles}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="enabled" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.enabled==1?'已启用':'已禁用'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lastDate" label="上次登录日期" align="center" width="150">
              <template slot-scope="scope">
                <span>{{scope.row.lastDate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <!-- <el-button type="text" @click="handleEnabled(scope.$index,scope.row)" class="enabled-text">{{scope.row.enabled==1?'禁用':'启用'}}</el-button> -->
                <el-button type="text" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></div>
          <div class="fb"><el-pagination
            class="pag"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination></div>
        </div>
        <DeleteDialog
          :delVisible="delVisible"
          @deleteData="deleteData"
          @handleCloseVisible="handleCloseVisible"
        ></DeleteDialog>
        <EditPManage :editShow="editShow" :editData="editData" @backFunStu="getFunStu" :arrarList="arrarList"></EditPManage>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import EditPManage from "../../components/systemSetup/EditUserManage";
import DeleteDialog from "../../components/public/DeleteConfim";

export default {
  data() {
    return {
      total: 0, //总条数
      currentPage: 1, //初始页
      pagesize: 10, // 每页的数据
      searchForm: {
        name:"",
        phone:""
      },
      editData: {},
      listShow: true,
      delVisible: false,
      index_id: "",
      editShow: false,
      dataList: [],
      arrarList:[],
      multipleSelection: []
    };
  },
  created() {
    // this.getData();
    this.getDataSearch();
  },
  watch:{
    dataList:function(){
      this.arrarList = this.dataList
    }
  },
  methods: {
    // 获取数据
    getData() {
      this.$axios.get('/Account/').then(res =>{
        if (res.data.hasError == false) {
          this.dataList = [...res.data.data]
          this.total = res.data.total;;
        }
      })
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getDataSearch();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getDataSearch();
    },
    getDataSearch(){
      var search = {
        name: this.searchForm.name,
        pageIndex: this.currentPage - 1,
        pageSize: this.pagesize,
        phone:this.searchForm.phone
      }
      this.$axios.post('/Account/Search',search)
        .then(res =>{
          if (res.data.hasError == false) {
            this.total = res.data.total;
            this.dataList =res.data.data
          }
        })
    },
    handleEdit(index, row) {
      this.editData = row;
      this.listShow = false;
      this.editShow = true;
    },
    handleEnabled(index,row){
      console.log(index,row,123)
    },
    searchSubmit() {
      this.getDataSearch()
    },
    addSubmit() {
      this.listShow = false;
      this.editShow = true;
      this.editData={};
    },
    handleDelete(index, row) {
      this.index_id = row.accountId;
      this.delVisible = true;
    },
    deleteData() {
      if(this.index_id !=""){
        this.$axios.delete(`/Account/${this.index_id}`)
          .then(res =>{
            if(res.data.hasError == false){
              this.$message.success("删除成功！");
              this.getDataSearch()
            }else {
              this.$message.error("删除失败！");
            }
          })
        this.delVisible = false;
      }
    },
    handleCloseVisible() {
      this.index_id = "";
      this.delVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getFunStu() {
      this.listShow = true;
      this.editShow = false;
      this.getDataSearch();
      this.editData = {};
    }
  },
  components: {
    EditPManage,
    DeleteDialog
  }
};
</script>
<style lang="scss" scope>
.wrap {
  box-sizing: border-box;
  padding:0 10px;
  border-radius: 5px;
  position: relative;
  height:100%;
  background:#fff;
  .pag {
    position: absolute;
    bottom: 10px;
  }.table-wrap {
    height: calc(100% - 150px);
  }
}
.uers-left {
  float: left;
}
.uers-right {
  float: right;
}
.enabled-text,.enabled-text:hover{
  color: #f20;
}
</style>